<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "攻略-详情",
    },
}
</route>

<template>
    <view class="m-base-box m-strategy-detail">
        <view class="m-swiper">
            <wd-swiper
                autoplay
                v-model:current="current"
                value-key="url"
                custom-indicator-class="custom-indicator-class"
                custom-image-class="custom-image"
                custom-next-image-class="custom-image-prev"
                custom-prev-image-class="custom-image-prev"
                :list="info?.images"
                previousMargin="24px"
                nextMargin="24px"
            ></wd-swiper>
        </view>
        <wd-card>
            <view class="flex flex-col items-start gap-1 pt-2 pb-4 w-[100%]">
                <wd-text :text="info?.title" bold size="18px" color="#000"></wd-text>
                <view class="flex justify-between items-center mt-2 w-[100%]">
                    <wd-text :text="info?.watchCount" size="12px" color="#949090" prefix="浏览量："></wd-text>
                    <wd-text :text="info?.likeCount" size="12px" color="#949090" prefix="点赞量："></wd-text>
                </view>
            </view>
        </wd-card>
        <wd-card title="攻略" class="mt-4">
            <view class="pb-4">
                <uv-parse :content="info?.describle"></uv-parse>
            </view>
        </wd-card>
    </view>
</template>

<script lang="ts" setup>
import { getStrategyInfoUsingGet } from "@/service/app";
const info = ref<any>({});
const current = ref<number>(0);
function getDetail(id: string) {
    getStrategyInfoUsingGet({ params: { id } }).then((res) => {
        console.log("getStrategyInfoUsingGet", res);
        info.value = res?.data || {};
    });
}
onLoad((value) => {
    getDetail(value?.id);
});
onShareTimeline(() => {
    return {};
});
</script>

<style lang="scss" scoped>
.m-strategy-detail {
    padding: 40rpx 20rpx;
}
.m-swiper {
    --wot-swiper-radius: 0;
    --wot-swiper-item-padding: 0 24rpx;
    --wot-swiper-nav-dot-color: #e7e7e7;
    --wot-swiper-nav-dot-active-color: #4d80f0;
    padding-bottom: 42rpx;
    :deep(.custom-indicator-class) {
        display: none;
    }
    :deep(.custom-image) {
        border-radius: 12rpx;
    }
    :deep(.custom-image-prev) {
        height: 168px !important;
    }
}
</style>
